<template>
	<view>
		<view class="content">
			<view class="top">
				<view class="top-left">
					<image src="../../static/login/back.png" @click="back"></image>
				</view>
				<view class="top-right">
					<image src="../../static/login/close.png"></image>
				</view>
			</view>
			<view class="mid">
				<image src="../../static/login/fire.png"></image>
			</view>
			<view class="text">
				<view class="login">注册</view>
			</view>
			<form class="input">
				<view class="name_tip">
					<input type='text' class="name" placeholder="请取个名字" placeholder-class="tip" v-model="name" @blur="checkName"
					 @input="isuser=1" />
					<view class="warn" v-if="name==''">用户名不能为空</view>
					<view class="warn" v-if="isuser == 0 && name != ''">
						<image src="../../static/login/yes.png"></image>
					</view>
					<view class="warn" v-if="isuser == 2 && name != ''">用户名已存在</view>
				</view>
				<view class="user_tip">
					<input type='text' class="user" placeholder="请输入邮箱" placeholder-class="tip" v-model="email" @input="ckemail"
					 @blur="ckisemail" />
					<view class="warn" v-if="email == ''">邮箱不能为空</view>
					<view class="warn" v-if="isemail == 0 && email != ''">
						<image src="../../static/login/yes.png"></image>
					</view>
					<view class="warn" v-if="isemail == 3 && email != ''">邮箱格式错误</view>
					<view class="warn" v-if="isemail == 2 && email != ''">邮箱已被注册</view>
				</view>
				<view class="psw_tip">
					<input :type="type" class="psw" placeholder="请输入密码" placeholder-class="tip" @blur="checkPsw" />
					<view class="warn" v-if="islook" @tap="change">
						<image src="../../static/login/look.png"></image>
					</view>
					<view class="warn" v-else @tap="change">
						<image src="../../static/login/hide.png"></image>
					</view>
				</view>
				<button hover-class="click" :class="button" @tap="sign">注册</button>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'password',
				name: '',
				email: '',
				psw: '',
				isuser: 1,
				isemail: 1,
				ispsw: 1,
				hasemail: false,
				islook: false,
				button: 'button'
			}
		},
		onLoad() {
			console.log(getApp().globalData.weex)
		},
		methods: {
			checkName() {
				uni.request({
					url: this.url + "/signup/check",
					data: {
						data: this.name,
						type: 'name'
					},
					method: 'POST',
					success: (res) => {
						console.log(res.data.is)
						if (res.data.is == 0) {
							this.isuser = 0
							this.canSign()
						} else {
							this.isuser = 2
						}
					}
				})
			},
			ckemail() {
				this.isemail = 1
				var email = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
				if (email.test(this.email)) {
					this.isemail = 0
				} else {
					this.isemail = 3
				}
				this.canSign()
			},
			ckisemail() {
				if (this.isemail != 3) {
					uni.request({
						url: this.url + '/signup/check',
						data: {
							data: this.email,
							type: 'email'
						},
						method: 'POST',
						success: (res) => {
							console.log(res.data.is)
							if (res.data.is == 0) {
								this.isemail = 0
							} else {
								this.isemail = 2
							}
						}
					})
				}
			},
			checkPsw(e) {
				this.psw = e.detail.value//不适用v-model的原因：如果使用v-model会使样式失效，uniapp的bug
				console.log(this.psw.length)
				if (this.psw.length >= 7) {
					this.ispsw = 0
					this.canSign()
				} else {
					uni.showToast({
						title: '密码需要大于8位',
						icon: 'none'
					})
				}
			},
			change() {
				this.islook = !this.islook
				if (this.islook) {
					this.type = 'text'
				} else {
					this.type = 'password'
				}
			},
			canSign() { //更改按钮样式，未调用
				if (this.isuser == 0 && this.isemail == 0 && this.ispsw == 0) {
					this.button = "success"
				} else {
					this.button = "button"
				}
				console.log(this.button)
			},
			sign() {
				if (this.button == "success") {
					uni.request({
						url: this.url + '/signup/add',
						data: {
							mail: this.email,
							name: this.name,
							pwd: this.psw
						},
						method: 'POST',
						success: (res) => {
							console.log(res)
							uni.showToast({
								title: '注册成功！',
								icon: "none"
							})
							uni.navigateBack({
								animationType: 'pop-out'
							})
							uni.request({ //发送邮箱
								url: this.url + '/signup/email',
								data: {
									name: this.name,
									mail: this.email
								},
								method: "POST",
							})
						}
					})
				}
			},
			back() {
				uni.navigateBack({
					animationType: 'pop-out'
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "../../common/top.scss";

	.top {
		.top-left {
			display: flex;
			align-items: center;
			margin-left: 32rpx;
			width: 48rpx;
			height: 88rpx;

			image {
				width: 28rpx;
				height: 48rpx;
			}
		}

		.top-right {
			display: flex;
			align-items: center;
			margin-right: 32rpx;
			width: 48rpx;
			height: 88rpx;

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}


	.text {
		padding: 0 64rpx;

		.login {
			height: 80rpx;
			line-height: 80rpx;
			margin-bottom: 14rpx;
			font-size: 56rpx;
		}
	}

	.input {
		padding: 0 64rpx;

		.tip {
			color: grey;
		}

		.name_tip,
		.user_tip,
		.psw_tip {
			height: 80rpx;
			position: relative;

			.warn {
				display: flex;
				align-items: center;
				height: 80rpx;
				line-height: 80rpx;
				font-size: $uni-font-size-sm;
				color: $uni-color-warning;
				position: absolute;
				right: 0;
				top: 0;

				image {
					width: 42rpx;
					height: 32rpx;
				}
			}

			.user,
			.psw,
			.name {
				width: 622rpx;
				display: block;
				border: none;
				margin-top: 45rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 5rpx solid rgba(39, 40, 50, 0.1);
				font-size: 32rpx;
			}
		}

		.button {
			margin-top: 120rpx;
			width: 520rpx;
			height: 96rpx;
			line-height: 96rpx;
			font-size: 32rpx;
			background: rgba(39, 40, 50, 0.20);
			border-radius: 24px;
			color: white;
		}

		.success {
			margin-top: 120rpx;
			width: 520rpx;
			height: 96rpx;
			line-height: 96rpx;
			font-size: 32rpx;
			background: $uni-color-primary;
			box-shadow: 0 25px 16px -18px rgba(255, 228, 49, 0.40);
			border-radius: 24px;
			color: white;
		}

		.click {
			background: rgba(39, 40, 50, 0.20);
			box-shadow: none;
		}
	}
</style>
